<template>
  <div class="app">
    <div class="sideBox">
      <div class="sdieimg"></div>
      <div class="QrCodeDownload">
        <img
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=620579142,3051099267&fm=26&gp=0.jpg"
          alt
          srcset
        />
        <span>APP下载</span>
      </div>
      <!-- <div class="EditSide">
        <i class="el-icon-edit"></i>
        <span>反馈</span>
      </div> -->
      <i class="el-icon-upload2" @click="backTop"></i>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  methods: {
    backTop() {
      let that = this;
      document.documentElement.scrollTop = 0;
    }
  },
  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.sideBox {
  position: fixed;
  height: 267px;
  width: 60px;
  background-color: white;
  right: 20px;
  top: 250px;
  z-index: 2;
  font-size: 10px;
  > i {
    font-size: 24px;
    text-align: center;
    line-height: 60px;
    position: absolute;
    bottom: 0px;
    width: 60px;
    right: -1px;
    height: 60px;
    cursor: pointer;
  }
  > i:hover {
    color: white;
    background-color: $main-color;
  }
  .sdieimg {
    background-image: url("https://res.tuhu.org/Image/rbar_icon.png?v=2");
    display: block;
    height: 115px;
    width: 60px;
    background-position: -565px 0;
    z-index: 1;
  }
  .QrCodeDownload {
    width: 60px;
    img,
    span {
      width: 100%;
      cursor: pointer;
      padding-top: 5px;
      display: block;
      text-align: center;
    }
  }
  .EditSide {
    i{
      font-size: 30px;
      width: 60px;
      padding: 5px;

    }
    span{
      padding: 5px;
    }
  }
}
</style>
